﻿<template>
  <div v-loading = "loading">
    <!-- 标题部分 -->
    <V-Title :titleName = 'titleName'></V-Title>
    <div class = "page_mainContent">
      <!-- 检索部分 -->
      <el-form label-width = '90px'>
        <el-row :gutter = '10'>
          <el-col :span = '8' style = 'height:52px'>
            <el-form-item label = "数据源名称：">
              <el-input placeholder = '请输入数据源名称进行查询' clearable v-model = 'requestParams.SourceName'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span = '8' style = 'height:52px'>
            <el-form-item label = "数据源类型：">
              <el-select placeholder = "请选择数据源类型" filterable clearable v-model = 'requestParams.SourceCategory'>
                <el-option v-for = "(item, index) in sourceCategoryList" :key = 'index'
                :label = 'item.text' :value = 'item.code'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span = '4' style = 'height:52px'>
            <el-button @click = 'getSearchInfo' type = 'primary'>查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格部分 -->
      <div class = 'page_tableContent'>
        <el-table :data = 'tableData' style = 'width:100%' stripe border>
          <el-table-column align = 'center' v-for = '(item, index) in tableColumn' :key = 'index' :label = 'item.text'
          show-overflow-tooltip>
            <template slot-scope = 'scope'>
              <span v-if = "item.indexName === 'IsActive'">{{scope.row[item.indexName] ? '是' : '否'}}</span>
              <span v-else>{{scope.row[item.indexName]}}</span>
            </template>
          </el-table-column>
          <el-table-column label = "操作" align = "center" width = '260px'>
            <template slot-scope = "scope">
              <el-button type = 'text' @click = "handleActive(scope.row)"
              v-if = '!scope.row.IsActive'><i class = 'iconfont icon-qiyong'></i>启用</el-button>
              <el-button type = 'text' v-else @click = "handleDeactive(scope.row)"><i class = 'iconfont icon-tingyong'></i>停用</el-button>
              <el-button type = 'text' @click = "handleEdit(scope.row)"><i class = 'iconfont icon-bianji'></i>编辑</el-button>
              <el-button type = 'text' @click = "handleDelete(scope.row)"><i class = 'iconfont icon-shanchu'></i>删除</el-button>
              <el-button type = 'text' @click = "handleDetail(scope.row)"><i class = 'iconfont icon-yanj'></i>详细</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部按钮和页码部分 -->
      <div class='page_bottomContent'>
        <div class = 'page_btnsContent'>
          <el-button type = "primary" @click = "handleAdd">新增</el-button>
        </div>
        <div class = 'page_paginationContent'>
          <el-pagination
          background
          @size-change = "handleSizeChange"
          @current-change = "handleCurrentChange"
          :current-page.sync = "requestParams.page"
          :page-size = 'requestParams.limit'
          :pager-count = "5"
          :page-sizes = "[10, 25, 50, 100, 500]"
          layout = "total, sizes, prev, pager, next"
          :total = 'totalLength'></el-pagination>
        </div>
      </div>
    </div>
    <!-- 编辑或者预览的弹窗 -->
    <DataSource-Form :dialogInfo = 'dialogInfo'
    @operationReset = 'dialogInfo.dialogFormVisible = false'
    @operationSuccess = 'operationSuccess'></DataSource-Form>
  </div>
</template>

<script src = './dataSource.js'></script>
